<template>
    <div style="height:100%;width:100%;" class="detail">
        <bar class="bar" @on-back="$router.back()">{{title}}
            <span v-if="!isSearch" slot="right" style="padding:0 10px" @click="$router.push('/eventSearch')">筛选</span>
        </bar>
        <div style="background-color: #f7f7f7" class="detail-timePick">
            <span>{{time ? time : '全部'}}</span>
            <i class="iconfont icon-rili detail-timePick-icon" @click="handleTime"></i>
        </div>
        <scroll style="height: calc(100% - 90px)"
                :total="total"
                @on-infinite="getData">
            <group class="detail-block">
                <cell-box class="vux-tap-active" v-for="(item, key) in detail" :key="key"
                          @click.native="$router.push({name:'eventDetail',query: item})" :is-link="false">
                    <div class="detail-cell-box">
                        <div class="detail-box-left">
                            <div>{{eventType[item.type]}}</div>
                            <div class="detail-left-time">{{item.happenTime}}</div>
                        </div>
                    </div>
                </cell-box>
            </group>
        </scroll>
    </div>
</template>

<script>
    import scroll from '../../../components/scroll.vue'
    import constants from '../../../util/Constants.vue'
    import {
        Bar,
    } from 'muka-ui'
    import {
        Group,
        CellBox
    } from 'vux'

    export default {
        name: 'dataInfo',
        components: {
            Bar,
            Group,
            CellBox,
            scroll
        },
        created: function () {
            this.eventType = constants.EVENT_TYPE;
            Date.prototype.format = function (partten) {
                if (partten === null || partten === '') {
                    partten = 'y-m-d'
                }
                let y = this.getFullYear()
                let m = this.getMonth() + 1
                let d = this.getDate()
                let r = partten.replace(/y+/gi, y)
                r = r.replace(/m+/gi, (m < 10 ? '0' : '') + m)
                r = r.replace(/d+/gi, (d < 10 ? '0' : '') + d)
                return r
            }
            let date = new Date()
            this.time = date.format('y-m')

            this.detail = []
            this.searchText = this.$route.query.keyword
            this.type = this.$route.query.type

            if (this.searchText) {
                this.title = this.searchText
                this.isSearch = true
            }

            if (this.type) {
                this.title = constants.EVENT_TYPE[this.type]
                this.isSearch = true
            }

            this.getData(1)
        },
        data: function () {
            return {
                isSearch: false,
                eventType: null,
                title: '事件记录',
                total: 0,
                pageNum: 1,
                showSearch: false,
                time: '',
                type: null,
                searchText: '',
                label: '全部',
                detail: [],
                num: 1
            }
        },
        methods: {
            getData: function (pageNum, done) {
                this.$ajax(
                    'safe/myEventPlus',
                    {
                        keywords: this.searchText,
                        pageSize: 20,
                        pageNum: pageNum,
                        month: this.time,
                        type: this.type
                    },
                    (content) => {
                        this.total = content.totalCount
                        this.detail = this.detail.concat(content.resultList)
                        this.showSearch = false

                        if (done) {
                            done()
                        }
                    })
            },
            //日期查询
            handleTime: function () {
                this.$vux.datetime.show({
                    cancelText: '取消',
                    confirmText: '确定',
                    format: 'YYYY-MM',
                    value: this.time,
                    onConfirm: (val) => {
                        this.time = val
                        this.pageNum = 1
                        this.detail = []
                        this.getData(1)
                    }
                })
            },
        }
    }

</script>

<style lang="less" scoped>
    .detail-timePick {
        height: 45px;
        line-height: 45px;
        padding: 0 15px;
        .detail-timePick-icon {
            float: right;
            line-height: 45px;
            font-size: 20px;
        }
    }

    .vux-cell-box {
        height: 40px;
    }

    .detail-add {
        color: #44b549;
        font-weight: 700;
    }

    .event-list {
        display: inline-block;
        width: ~'calc(33% - 13px)';
        text-align: center;
        line-height: 40px;
        border: 1px solid #ccc;
        margin: 6px;
    }

    .event-select {
        background: #44b549;
        color: white;
    }

</style>
